<template>
  <div>
    <div class="app-aside fl">
      <div
        v-for="item in menuList"
        :key="item.id"
        class="menu-item"
        :class="{'menu-item-close':!item.isShowChildren}"
      >
        <div class="menu-tab clearfix">
          <div @click="item.isShowChildren = !item.isShowChildren" class="menu-tab-title fl" :class="{'color2':!item.isShowChildren}"
>{{ item.name }}</div>
          <div
            @click="item.isShowChildren = !item.isShowChildren"
            class="menu-tab-arrow fr"
            :class="{'menu-tab-arrow-close':!item.isShowChildren}"
          ></div>
        </div>


           <div class="menu-list" v-show="item.isShowChildren">
            <div
              v-for="el in item.children"
              :key="el.id"
              @click="enterPage(el)"
              class="menu-list-item"
              :class="{'active':el.isSelected}"
            >
              <i class="menu-list-icon"></i>
              {{ el.name }}
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: []
    };
  },
  mounted() {
    this.initMenuList();
  },
  methods: {
    enterPage(item) {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
      if (item.routePath == this.$route.name) return;
      
      this.menuList.forEach(function(value){
        if(value.children.length){
          value.children.forEach(function(val){
            val.isSelected = false;
          })
        }
      });
      item.isSelected = true;
      if(item.id==301){
        window.open("http://rzsc.sczwfw.gov.cn/sso.action?providerId=195004716&target=http://www.sc.gov.cn/scszmail/complaint/index","_blank");
      }else{
        this.$router.push({ name: item.routePath });
      }
    },
    initMenuList() {
      this.menuList = [
        {
          id: 1,
          name: "我的信息",
          isShowChildren: false,
          routePath: "home",
          children: [
            { id: 101, name: "基本信息", routePath: "personInfo" },
          //  { id: 102, name: "账户安全", routePath: "personSafe" }
          ]
        },
        {
          id: 2,
          name: "我的订阅",
          isShowChildren: false,
          // routePath: "home",
          children: [{ id: 601, name: "我的订阅", routePath: "mysubscibe",isSelected:false}]
        },
        {
          id: 3,
          name: "我的收藏",
          isShowChildren: false,
          // routePath: "home",
          children: [{ id: 401, name: "我的收藏", routePath: "mycollect",isSelected:false}]
        },
        {
          id: 4,
          name: "我的互动",
          isShowChildren: true,
          // routePath: "home",
          children: [
            { id: 301, name: "省长信箱", routePath: "mail",isSelected:false},
           // { id: 302, name: "在线访谈", routePath: "webonline" },
            { id: 303, name: "意见征集", routePath: "suggestions",isSelected:false },
            { id: 304, name: "12345在线留言", routePath: "survey",isSelected:false },
            { id: 305, name: "依申请查询", routePath: "inspection",isSelected:false }
          ]
        },
        {
          id: 5,
          name: "我的办事",
          isShowChildren: true,
          // routePath: "home",
          children: [
            { id: 501, name: "办件进度", routePath: "mything",isSelected:false },
           // { id: 502, name: "我的预约", routePath: "webonline" },
            { id: 503, name: "我的评价", routePath: "myEvaluate",isSelected:false },
            { id: 504, name: "我的材料", routePath: "myMaterial",isSelected:false }
            
          ]
        },
        
        {
          id: 6,
          name: "我的足迹",
          isShowChildren: false
,
          // routePath: "home",
          children: [{ id: 601, name: "我的足迹", routePath: "mylook",isSelected:false }]
        }
        /*
        {
          id: 7,
          name: "我的积分",
          isShowChildren: true,
          routePath: "home",
          children: [{ id: 701, name: "我的浏览", routePath: "mylook" }]
        },
        {
          id: 8,
          name: "我的个性化",
          isShowChildren: true,
          routePath: "home",
          children: [{ id: 801, name: "我的浏览", routePath: "mylook" }]
        }*/
        /*
        {
          id: 9,
          name: "我的办件",
          isShowChildren: true,
          routePath: "home",
          children: [{ id: 201, name: "我的办件", routePath: "mything" }]
        }*/
      ];
    }
  }
};
</script>
